Overview

Good onboarding flow helps new users to get acquainted with an app and its features as quickly and easily as possible. By now, you should know how to work with data and display UI elements for the onboarding flow. In this exercise, you’ll put those skills into practice by building the UI with Jetpack Compose. You will be guided to create an onboarding screen using various Composables.

Scenario

It’s time to start coding the functionality for the Little Lemon food ordering app. Before new users start placing orders, they’ll need to be registered into the system. In this exercise, you’ll make this possible by creating an onboarding flow to collect a user’s first name, last name and email address.

Prerequisites

To complete this exercise, you should have created an application and pushed the project to a GitHub repository beforehand.

Instructions

Step 1: Create a new file

• Under Composables application package name, create a new file called Onboarding.kt . This file will hold the Onboarding Composable representing the onboarding screen and its preview.

Step 2: Add the Header

Open the Onboarding.kt file and then:

• Create the Onboarding Composable

• Create the Onboarding Composable preview

• Inside the Onboarding Composable, implement a header at the top of the screen that contains the Image Composable with the logo.png file, retrieved from the assets that you downloaded earlier.

Step 4: Collect user input

• Add some static text that will prompt users to add their personal details. For example "Let's get to know you" .

• Display multiple TextField Composables below one another to gather the required user input:

  • Present a TextField to store a user’s first name

  • Present a TextField to store a user’s last name

  • Present a TextField to store a user’s email address

• Use the Column Composable to arrange these items.

Tip : To persist a TextField value across a view recomposition, use the remember delegate with the mutableStateOf function.

Step : Add a register button

The final step to complete the onboarding screen is to implement the register button. Add a Button Composable to the screen below the password and set its label to "Register" . In the following exercise, you will implement some more TextField input validation and navigation for successful registration flow to other screens in your app.

Design

Below you’ll find a mockup that you can use as a reference for the onboarding flow, but feel free to come up with your own tweaks and personal touches. Remember, the visual design of your app needs to adhere to the Little Lemon brand style guide covered in the exercise Applying design fundamentals in Figma .

Conclusion

Well done. You just coded the first screen of your app! More specifically, in this exercise, you created a new screen file called Onboarding and implemented an onboarding flow. You also added the header with text that prompts the user, set Composables to gather registration data and added a button to register the user.